<!-- 商品分类+列表 -->
<template>
    <view class="scrollViewPage">
        <scroll-view
            class="scrollBoxLeft"
            :scroll-y="true"
            scroll-with-animation
            :scroll-top="scrollTop"
        >
            <view
                v-for="(item, index) in classList"
                :key="item.id"
                :class="['classTitle', classId == item.id ? 'actives' : '']"
                @tap="setCurrent(item)"
            >
                <text>{{item.cateName}}</text>
                <view class="classactive" v-if="classId == item.id" />
            </view>
        </scroll-view>
        <scroll-view
            class="scrollBoxRight"
            scroll-y
            scroll-with-animation
            :scroll-top="scrollTop"
        >
            <view class="topText">
                <view class="className">{{classList[classId].name}}</view>
                <view class="bk">必点爆款，无限回购</view>
            </view>
            <productCard
				v-for="(item, index) in productList"
				:key="index"
				:item="item"
				@addToCar="addToCar"
                @toDetail="toDetail"
			/>
            <u-loadmore
                :status="loadmoreStatus"
                line
                marginTop="30"
                marginBottom="80"
            />
            <u-safe-bottom></u-safe-bottom>
        </scroll-view>
        
        <!-- 购物车 -->
        <buyCar
            :buyCarList="buyCarList"
            @numChange="numChange"
            @checkChange="checkChange"
            @clearAll="clearAll"
        />
    </view>
</template>

<script>
    import list from "../../../uni_modules/uview-ui/libs/config/props/list";
import { productCard } from "@/components/productCard.vue"
    import { buyCar } from "@/pages/timelyDelivery/components/buyCar.vue"
    export default {
        props: {
            classList: Array
        },
        components: {
            productCard,
            buyCar
        },
        data() {
            return {
                loadmoreStatus: 'loading',
                classId: 0,
                productList: [],
				buyCarList: []
            };
        },
        watch: {
            buyCarList: {
                handler(n) {
                    this.productList.map(i => {
                        if (this.buyCarList.find(j => j.productId === i.id)) {
                            i.cartNum = this.buyCarList.find(j => j.productId === i.id).cartNum
                        } else {
                            i.cartNum = 0
                        }
                    })
                    console.log(this.productList)
                },
                deep: true
            },
            classList: {
                handler(n) {
                    this.productList = []
                    if (n.length) this.classId = n[0].id
                },
                deep: true,
                immediate: true
            },
            classId: {
                handler(n) {
                    if (n) this.getProductList()
                },
                deep: true,
                immediate: true
            },
            
        },
        created() {
            this.getCarList()
        },
        methods: {
            // 切换分类
            setCurrent(item) {
                this.classId = item.id
            },
            getProductList() {
                this.loadmoreStatus = 'loading'
                this.$http('/api/products', 'get', {
                    sid: this.classId
                }).then(res => {
                    this.productList = res.data
                    this.productList.map(i => {
                        if (this.buyCarList.find(j => j.productId === i.id)) {
                            i.cartNum = this.buyCarList.find(j => j.productId === i.id).cartNum
                        }
                    })
                    this.loadmoreStatus = 'nomore'
                })
            },
            // 获取购物车列表
            getCarList() {
                this.$http('/api/cart/list', 'get', {ids: ''}).then(res => {
                    res.data.valid.map(i => {
                        i.checked = true
                    })
                    this.buyCarList = res.data.valid
                })
            },
			// 添加购物车
			addToCar(id, num) { // 此处的id为商品id
                console.log(id, num)
                uni.showLoading({
                    mask: true
                })
                if (num === 0) { // 数量为0，删除购物车里的这个商品
                    this.deleteCarPro(this.buyCarList.find(i => i.productId === id).id)
                } else if (this.buyCarList.find(i => i.productId === id)) { // 先看看购物车里有没有这个商品有，修改数量
                    this.$http('/api/cart/num', 'post', {
                        id: this.buyCarList.find(i => i.productId === id).id,
                        number: num
                    }).then(res => {
                        uni.hideLoading()
                        this.getCarList()
                    }).catch(() => {
                        uni.showToast({
                            title: '加入购物车失败',
                            icon: 'none'
                        })
                    })
                } else { // 没有，添加
                    this.$http('/api/cart/add', 'post', {
                        productId: id,
                        cartNum: num
                    }).then(res => {
                        uni.hideLoading()
                        // uni.showToast({
                        //     title: '已加入购物车'
                        // })
                        this.getCarList()
                    }).catch(() => {
                        uni.showToast({
                            title: '加入购物车失败',
                            icon: 'none'
                        })
                    })
                }
			},
            // 购物车里边操作数量
            numChange(e) {
                this.addToCar(e.name, e.value)
            },
            // 清空购物车
            clearAll() {
                uni.showModal({
                    title: '提示',
                    content: '是否清空购物车',
                    success: (res) => {
                        this.deleteCarPro()
                        uni.showToast({
                            title: '已清空购物车！',
                            icon: 'none'
                        })
                    }
                })
            },
            deleteCarPro(id) { // 有id删除单个，没有id就是清空购物车
                this.$http('/api/cart/del', 'post', {
                    ids: id ? [id] : this.buyCarList.map(i => i.id)
                }).then(res => {
                    uni.hideLoading()
                    // uni.showToast({
                    //     title: '已加入购物车'
                    // })
                    this.getCarList()
                }).catch(() => {
                    uni.showToast({
                        title: '加入购物车失败',
                        icon: 'none'
                    })
                })
            },
            // 改变勾选状态
            checkChange(e) {
                this.buyCarList.map(i => {
                    i.checked = e.includes(i.id)
                })
            }
        }
    };
</script>
<style scoped lang="scss">
    .scrollViewPage {
        height: 100%;
        display: flex;
        font-family: PingFang SC, PingFang SC;
        .scrollBoxLeft {
            width: 200rpx;
            height: 100%;
            .classTitle {
                height: 110rpx;
                line-height: 110rpx;
                text-align: center;
                font-size: 28rpx;
                color: #666666;
                position: relative;
            }
            .actives {
                background-color: $uni-bg-color-hover;
                font-weight: 600;
                font-size: 30rpx;
                color: $uni-text-color-grey-3;
                &:before {
                    content: '';
                    display: inline-block;
                    width: 16rpx;
                    height: 90rpx;
                    border-radius: 8rpx;
                    background-color: $uni-color-primary;
                    position: absolute;
                    left: -8rpx;
                    top: 10rpx;
                }
            }
        }
        .scrollBoxRight {
            flex: 1;
            height: 100%;
            background-color: $uni-bg-color;
            border-radius: $uni-border-radius-base $uni-border-radius-base 0 0;
            padding: 30rpx 0 30rpx 30rpx;
            margin-right: 30rpx;
            .topText {
                .className {
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #9F07B7;
                }
                .bk {
                    font-size: 26rpx;
                    color: #666666;
                }
            }
        }
    }
</style>